<template>
    <div>
        <!--主内容-->
        <div>
            <div>
                <h4><span></span><span>订单提交成功，请您及时付款！订单号：{{order.out_trade_no}}</span>
                </h4>
                <span><em>应付金额：</em><em>￥{{order.total_amount}}</em></span>
                <div></div>
            </div>
            <div>
                <div>微信支付</div>
                <div>
                    <p>请使用微信扫一扫。</p>
                    <div>
                        <qriously :value="order.code_url" :size="250"/>
                        <div>
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: null,  // 定时器名称
            initQCode: '',
            timer1:'',
            order: {}
        }
    },
    created() {
        this.initPay();
    },
    mounted() {
        //在页面渲染之后执行
        //每隔三秒，去查询一次支付状态
        this.timer1 = setInterval(() => {
            this.queryPayStatus(this.order.out_trade_no)
        }, 3000);
    },
    methods: {
        initPay(){
            const vm = this;
            this.axios({
                method: "get",
                url: "/myapi/user/order/createNative/" + this.$route.params.pid,
            })
                    .then(response => {
                        vm.order = response.data.content;
                    }).catch((error) => {
                console.log("获取数据失败", error);
            });
        },
        //查询支付状态的方法
        queryPayStatus(orderNo) {
            const vm = this;
            this.axios({
                method: "get",
                url: "/myapi/user/order/queryPayStatus/" + orderNo + "/" + this.$route.params.type,
            }).then(response => {
                if (response.data.message === "支付成功") {
                    //如果支付成功，清除定时器
                    clearInterval(vm.timer1)
                    vm.$message({
                        type: 'success',
                        message: '支付成功!'
                    })
                    //跳转到课程详情页面观看视频
                    vm.$router.push({path: '/home'})
                }else if(response.data.message === "支付出错或订单取消"){
                    clearInterval(this.timer1)
                    vm.$message({
                        type: 'error',
                        message: '支付失败!'
                    })
                    //跳转到课程详情页面观看视频
                     vm.$router.push({path: '/home'})
                }
            })
        }
    }
}
</script>

<style>
</style>
